<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>LogonTracer</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@5.1.2/css/bootstrap5-toggle.min.css" integrity="sha384-0lIa81VMKhT4lTphDk5USICv1KjOG1vgvk17vDiZGAw4RjRa47eHhKL/Xk+TJ2N+" crossorigin="anonymous">
  <link rel="stylesheet" href="static/css/style.css">
  <link rel="stylesheet" href="static/css/dark-mode.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.umd.js" integrity="sha384-iU8HYtnGQ8Cy4zl7gbNMOhsDTTKX02BTXptVP/vqAWIaTfM7isw76iyZCsjL2eVi" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.2.5/jquery.floatThead.min.js" integrity="sha384-BQqEWrCh10Qb7ueE/zu0T0v7noV1yb/D8uS2xOOuq2+70Zn0XI9Vi3m+SrD1xSNZ" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@5.1.2/js/bootstrap5-toggle.jquery.min.js" integrity="sha384-1B+pGsGQhuc6J3yvEqAHys/XCGuY3SN/trNbr1zMw6UFqp+aa5/r1TSBMmvA+QGa" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js" integrity="sha384-7qAoOXltbVP82dhxHAUje59V5r2YsVfBafyUDxEdApLPmcdhBPg1DKg1ERo0BZlK" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/desvg@1.0.2/desvg.min.js"></script>
  <!-- Neo4j JavaScript Driver -->
  <script src="https://cdn.jsdelivr.net/npm/neo4j-driver@4.4.11/lib/browser/neo4j-web.min.js" integrity="sha384-M7IgiSpzRjF1qJu8pYaYwoDwXif/XBFUlabbZLNDtqXE7kPugcTx7QRyZqveSoBZ" crossorigin="anonymous"></script>
  <script src="static/js/script.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light p-1 shadow">
    <a class="navbar-brand" href="#"><img class="my_svg" src="static/images/logo_timeline.svg" alt="top" width="144"></a>
    <div class="collapse navbar-collapse">
      <form class="navbar-nav" role="search">
        <div id="caseStatus" class="mt-2 h-25"></div>
        <div id="itemForm">
          <div class="row ms-1 mt-2" style="--bs-gutter-x: 0.5rem;">
            <div class="col-auto">
              <select class="form-select" id="InputSelect">
                <option value="Username">Username</option>
              </select>
            </div>
            <div class="col-auto">
              <input class="form-control" type="text" value="administrator" id="query-input">
            </div>
          </div>
        </div>
        <input type="button" class="btn btn-primary ms-1 mt-2 h-25" value="+" onclick="ItemField.add();" />
        <input type="button" class="btn btn-primary ms-1 mt-2 h-25" value="-" onclick="ItemField.del();" />
        <span class="ms-1 mt-2">
          <input type="checkbox" data-toggle="toggle" data-onlabel="Table" data-onstyle="secondary" data-height="38" data-offlabel="Graph" data-offstyle="outline-secondary" id="timelineTypes">
        </span>
        <button type="button" class="btn btn-outline-primary ms-1 mt-2 h-25" onclick="searchTimeline()">search</button>
        <button type="button" class="btn btn-outline-primary ms-1 mt-2 h-25" onclick="createAlltimeline()">all</button>
        <div class="btn-group ms-1 mt-2 h-25">
          <button class="btn btn-outline-secondary" type="button">Download</button>
          <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only"></span>
          </button>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" onclick="downloadSummary()" href="#">Summary</a>
            <a class="dropdown-item" onclick="downloadDetail()" href="#">Details</a>
          </div>
        </div>
        <div class="form-check form-switch ms-5 mt-3">
          <input class="form-check-input" type="checkbox" id="darkSwitch">
          <label class="form-check-label" for="darkSwitch">Dark Mode</label>
        </div>

        <li class="nav-item dropdown ms-5 mt-2 h-25" style="margin-left:auto">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Settings
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><h6 class="dropdown-header">User Menu</h6></li>
            <li><a class="dropdown-item" href="setting">Change Password</a></li>
            <li><a class="dropdown-item" href="changecase_t">Change Case</a></li>
            <div class="dropdown-divider"></div>
            <li><h6 class="dropdown-header">Admin Menu</h6></li>
            <li class="dropend drop-hover">
              <a class="dropdown-item dropdown-toggle" href="#">User Management</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="signup">Add User</a></li>
                <li><a class="dropdown-item" href="usermng">Delete User</a></li>
              </ul>
            </li>
            <li class="dropend drop-hover">
              <a class="dropdown-item dropdown-toggle" href="#">Case Management</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="addcase">Add New Case</a></li>
                <li><a class="dropdown-item" href="delcase">Delete Case</a></li>
                <li><a class="dropdown-item" href="casemng">Add Access to Case</a></li>
                <li><a class="dropdown-item" href="delcasemng">Delete Access to Case</a></li>
              </ul>
            </li>
            <div class="dropdown-divider"></div>
            <li><h6 class="dropdown-header">User: {{ neo4j_user }}</h6></li>
            <li><a class="dropdown-item" href="logout">Logout</a></li>
          </ul>
        </li>


        <script src="static/js/dark-mode-switch.min.js"></script>
      </form>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-12 main mt-3">
        <div id="error"></div>
        <div id="cy"></div>
        <div id="addcanvas"></div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var neo = neo4j.default;
    //Neo4j access settings
    if (location.protocol == 'http:') {
      var driver = neo.driver("bolt://{{ server_ip }}:{{ ws_port }}", neo.auth.basic("{{ neo4j_user }}", "{{ neo4j_password }}"));
    } else if (location.protocol == 'https:') {
      var driver = neo.driver("bolt+ssc://{{ server_ip }}:{{ ws_port }}", neo.auth.basic("{{ neo4j_user }}", "{{ neo4j_password }}"));
    }
    var caseName = '{{ case_name }}';
    var session = driver.session({database: caseName});
    //createAlltimeline();

    var currentNumber = 0;
    var ItemField = {
      currentNumber: 0,
      itemTemplate: '<div class="row ms-1 mt-1" style="--bs-gutter-x: 0.5rem;">\
                      <div class="col-auto">\
                        <select class="form-select" id="InputSelect_count_">\
                          <option value="Username">Username</option>\
                        </select>\
                      </div>\
                      <div class="col-auto">\
                        <input class="form-control" type="text" id="query-input_count_">\
                      </div>',
      add: function() {
        currentNumber++;
        if (currentNumber <= 10) {
          var new_item = this.itemTemplate.replace(/_count_/mg, currentNumber);
          var new_area = document.createElement("div");
          new_area.setAttribute("id", "item" + currentNumber);
          var field = document.getElementById('itemForm');
          field.appendChild(new_area);
          document.getElementById('item' + currentNumber).innerHTML = new_item;
        }
      },
      del: function() {
        if (currentNumber == 0) {
          return;
        }
        var field = document.getElementById('itemForm');
        field.removeChild(field.lastChild);
        currentNumber--;
      }
    }

    if (caseName.indexOf("neo4j") != -1) {
      document.getElementById("caseStatus").innerHTML = '<button type="button" class="btn btn-secondary" disabled>case: default</button>';
    } else {
      document.getElementById("caseStatus").innerHTML = '<button type="button" class="btn btn-secondary" disabled>case: ' + caseName + '</button>';
    }

    $(function(){
      deSVG('.my_svg', true);
    });
  </script>
</body>

</html>
